<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1. Vue中的数据代理：
                通过vm对象来代理data对象中属性的操作(读写)
        2. Vue中数据代理的好处：
                更加方便地操作data中的数据，否则每次访问属性都需要加上_data
        3.基本原理：
                通过Object.defineProperty()把data对象中所有属性添加到vm上
                为每一个添加到vm上的属性，都指定一个getter()/setter()
                在getter()/setter()内部去操作data中对应的属性




        假设在data中创建一个属性为age，属性值为18，在new的过程中，Vue的实例，也就是
        VM(视图模型)，将data变为实例身上的一个属性：_data，此时写在data的age就被保存在
        _data上，要访问这个属性就需要_data.age      因为    vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用
        所以每次访问age属性都需要使用_data.age   这样特别麻烦，于是用age对象数据代理_data对象上的age属性
        将age直接写在 vm 上 ，此时age就是 vm 直接的属性，在Vue模板中就可以直接使用age了
        改变age属性，也就相当于改变了 _data.age    那么页面中有此属性的地方也会一起更改

     -->
</body>
</html>